<template>
  <body id="paper">
  <template v-if="!isLogin">
    <el-form class="login-container" label-position="left"
             label-width="0px" v-loading="loading">
      <h3 class="login_title">用户注册</h3>
      <el-form-item>
        <el-input type="text" v-model="registerForm.username"
                  auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="registerForm.password"
                  auto-complete="off" placeholder="密码">
        </el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 40%;background: #505458;border: none" v-on:click="setLogin">返回登录</el-button>
        <el-button type="primary" style="width: 40%;background: #505458;border: none" v-on:click="register">注册</el-button>
      </el-form-item>
    </el-form>
  </template>
  <template v-else>
    <el-form class="login-container" label-position="left"
             label-width="0px" v-loading="loading">
      <h3 class="login_title">用户登录</h3>
      <el-form-item>
        <el-input type="text" v-model="loginForm.username"
                  auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="loginForm.password"
                  auto-complete="off" placeholder="密码">
        </el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 40%;background: #505458;border: none" v-on:click="login">登录</el-button>
        <el-button type="primary" style="width: 40%;background: #505458;border: none" v-on:click="setRegister">注册</el-button>
      </el-form-item>
    </el-form>
  </template>
  </body>
</template>
<script>
export default{
  name:'Login',
  data () {
    return {
      isLogin: true,
      checked: true,
      loginForm: {
        username: '',
        password: ''
      },
      registerForm:{
        username: '',
        password: ''
      },
      loading: false
    }
  },
  methods: {
    setLogin(){
      this.isLogin = true
    },
    setRegister(){
      this.isLogin = false
    },
    login() {
      this.$axios
          .post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(resp => {
            console.log(resp)
            if (resp.status === 200) {

              // 登录成功，保存令牌（如果提供了令牌）
              // 假设resp.data.token是令牌
              // 您可能需要根据实际API响应调整这一部分
              localStorage.setItem('token', resp.data.token);
              localStorage.setItem('userId', resp.data.id);
              localStorage.setItem('author', this.loginForm.username);

              this.$router.push('/index')
              // this.$alert('登录成功', '提示', {
              //   confirmButtonText: '确定'
              // })
              // 或者您希望用户登录后跳转到的页面
            } else {
              // 登录失败，显示错误信息
              this.$alert(resp.data.message, '提示', {
                confirmButtonText: '确定'
              })
            }
          })
          .catch(failResponse => {
            // 请求失败处理
            console.error('登录请求失败：', failResponse);
            this.$alert('用户名或密码错误', '提示', {
              confirmButtonText: '确定'
            })
          })
    },
    register () {
      this.$axios
          .post('/register', {
            username: this.registerForm.username,
            password: this.registerForm.password
          })
          .then(resp => {
            if (resp.status === 200) {
              this.$alert('注册成功', '提示', {
                confirmButtonText: '确定'
              })
              this.$router.replace('/login')
            } else {
              this.$alert(resp.data.message, '提示', {
                confirmButtonText: '确定'
              })
            }
          })
          .catch(failResponse => {
            console.error('登录请求失败：', failResponse);
            this.$alert('用户名已存在', '提示', {
              confirmButtonText: '确定'
            })
          })
    }
  }
}
</script>
<style>
#paper {
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
body{
  margin: -5px 0px;
}
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>